<!DOCTYPE HTML>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>代码运行 - Code Playground - JET</title>
	<link rel="stylesheet" href="../../source/assets/jet.reset.css" type="text/css" />
	<link rel="stylesheet" href="../../source/assets/jet.960grid.css" />
	<style>
	html{
		overflow-x:hidden;
	}
	body{
		color:white;
		background: #123;
	}
	#Content{
		margin: 0 30px;
	}
	.codeEditor{
		width:100%;
		height:260px;
		color:white;
		background:#223344;
	}
	.optionButton{
		margin: 5px;
	}
	.codeRunContainer{
		width:100%;
		height:260px;
		border:0px solid #cccccc;
		color:white;
		background:#334455;
	}
	</style>
</head>

<body>
	<div id="Content">
		<h1>代码运行 - Code Playground</h1>
		<div>
			<textarea id="CodeEditor" class="codeEditor" name="CodeEditor">
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>运行结果</title>
</head>

<body>
	<div id="Content">Running...</div>
	
	<script type="text/javascript" defer="defer" src="../../source/jet.base.js"></script>
	<script type="text/javascript" defer="defer" src="../../source/jet.http.js"></script>
	<script id="JavascriptCode" type="text/javascript" defer="defer">
	//<![CDATA[
		Jet().$package(function(J){
			var $H = J.http;
			J.http.loadScript("../../source/jet.ui.js");
			//J.http.loadScript("../../source/jet.test1.js");
			//J.http.loadScript("../../source/jet.test2.js");
		});
		Jet().$package(function(J){
			J.dom.setStyle(J.dom.id("Content"),"background","white");
			J.dom.setStyle(J.dom.id("Content"),"height","100px");
			J.dom.setStyle(J.dom.id("Content"),"width","600px");
			J.dom.id("Content").innerHTML="Hello world, ^_^!";
			J.out(1);
		});
	//]]>
	</script>
</body>
</html>

			</textarea>
		</div>
		<div class="optionButton">
			<button id="Button_1" style="display:none;" onclick="J.Console.showHTMLCode()">HTML代码</button>
			<button id="Button_2" style="display:none;" onclick="J.Console.showJsCode()">Javascript代码</button>
			<button id="Button_3" onclick="playground.runCode()">运行</button>
		</div>
		<div>
			<iframe id="CodeRunContainer" class="codeRunContainer" name="CodeRunContainer" src="about:blank"></iframe>
		</div>
	</div> 

	<script type="text/javascript" src="../../source/jet.base.js"></script>
	<script type="text/javascript">
	//<![CDATA[

		Jet().$package("playground",function(J){
			var $D = J.dom;
			var CodeEditor = $D.id("CodeEditor");
			var CodeRunContainer = window.frames["CodeRunContainer"];
			
			this.runCode = function(htmlCode){
				htmlCode = htmlCode || CodeEditor.value;
				CodeRunContainer.document.open("text/html","replace"); 
				CodeRunContainer.document.write(htmlCode) 
				CodeRunContainer.document.close(); 
			};
		});
	//]]>
	</script>
</body>
</html>
